<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>人-家</title>
	<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
	<script src="./js/login.js"></script>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		html,
		body {
			height: 100%;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: "宋体";
			/* 渐变色网站： https://webgradients.com/*/
			/* background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%); */
			/* 渐变换图片 */
			background: url(https://pic1.zhimg.com/v2-1a65a45cda187984ec0e56c159f983b8_r.jpg) no-repeat;
			background-size: 100%;
		}

		.login {
			width: 450px;
			height: 500px;
			background-color: rgba(244, 164, 96, 0.2);
			/* background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%); */
			border-radius: 8px;
		}

		.login h1 {
			height: 80px;
			width: 93%;
			background: transparent;
			color: #ddd;
			line-height: 80px;
			font-size: 30px;
			text-align: center;
			margin: 15px auto;
		}

		.login-form {
			width: 85%;
			height: 60%;
			margin: 0 auto;
		}

		.login-form form {
			display: flex;
			width: 100%;
			height: 100%;
			margin: 0 auto;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
		}

		.login-form form input {
			width: 80%;
			font-size: 16px;
			outline: none;
			margin: 10px auto;
		}

		input:not([type='submit']) {
			height: 40px;
			border: 0;
			color: #fcfcfc;
			background: transparent;
			border-bottom: 2px solid #fff;
			padding: 15px 10px;
			padding-bottom: 2px;
		}

		input::placeholder {
			color: #ccc;
		}


		.button {
			/* 按钮样式模板网站：http://tools.jb51.net/static/api/button_css/ */
			line-height: 35px;
			height: 35px;
			width: 70px;
			color: #ffffff;
			background-color: #904419;
			font-size: 18px;
			font-weight: normal;
			font-family: Arial;
			border: 0px solid #dcdcdc;
			-webkit-border-top-left-radius: 10px;
			-moz-border-radius-topleft: 10px;
			border-top-left-radius: 10px;
			-webkit-border-top-right-radius: 10px;
			-moz-border-radius-topright: 10px;
			border-top-right-radius: 10px;
			-webkit-border-bottom-left-radius: 10px;
			-moz-border-radius-bottomleft: 10px;
			border-bottom-left-radius: 10px;
			-webkit-border-bottom-right-radius: 10px;
			-moz-border-radius-bottomright: 10px;
			border-bottom-right-radius: 10px;
			-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
			-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
			box-shadow: inset 0px 0px 0px 0px #ffffff;
			text-align: center;
			display: inline-block;
			text-decoration: none;
		}

		.button:hover {
			background-color: #702b0c;
		}

		.footer {
			position: fixed;
			bottom: 0;
			height: 50px;
			font-size: 13px;
			color: #e1dfe5;
		}

		.footer a {
			text-decoration: none;
			color: #7cea97
		}
	</style>
</head>

<body>
	<div class="login">
		<h1>“人-家”健康安全监管系统</h1>
		<div class="login-form">
			<form method="post">
				<input type="text" name="username" id="usr" value="" placeholder="请输入用户名" />
				<input type="password" name="password" id="pwd" value="" placeholder="请输入密码" />
				<input type="submit" class="button" value="登    录" />
			</form>
		</div>

	</div>
	<div class="footer">
		联系电话:400-706-1880 &nbsp 技术支持QQ:1075518044<br>
		开发商:华清远见济南研发中心 <a href="http://www.farsight.com.cn" target="_blank"><b>边缘计算网关B/S版</b></a>
	</div>

</body>

</html>